<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<!-- 在线预订 -->
<style>
  @media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
      max-width: 1200px;
    }
  }
</style>
<style>
  label {
    font-size: 12px;
  }

  input {
    margin-top: 3%;
    margin-bottom: 3%;
    margin-left: 30px;
    outline: none;
    height: 35px;
    width: 70%;
    border: 0;
    background-color: #f6f6f6;
  }

  p {
    font-size: 14px;
    color: rgb(153, 153, 153);
  }
</style>

<body>
  <div id="booking">
    <!-- 网页头部 -->
    <header>
      <iframe src="./header.html" height="110px" width="100%" frameborder="0"></iframe>
    </header>
    <!-- 网页内容 -->
    <section>
      <div style="width: 100%; height: 400px; overflow: hidden;">
        <img src="../img/slider-home-v1.jpg" width="100%" alt="">
      </div>
    </section>
    <!-- 在线预订 -->
    <section>
      <div class="container">
        <div style="text-align: center;">
          <div style="padding-top: 5%;">
            <img src="../img/object-09.png" alt="">
            <div style="display: flex; margin-top: 2%;margin-bottom: 3%;">
              <div style="margin: auto;">
                <img src="../img/line.jpg" height="6px" width="329px" alt="">
              </div>
              <div style="margin: auto;">
                <h2 style="font-weight: 600;margin: auto;">在线预订</h2>
              </div>
              <div style="margin: auto;">
                <img src="../img/line.jpg" height="6px" width="329px" alt="">
              </div>
            </div>
          </div>
        </div>
        <!-- 表单 -->
        <div style="margin-top: 2%;display: flex;margin-bottom: 3%;">
          <div style="width: 40%; border-right: 1px dashed #999;">
            <h6 style="font-weight: 600;margin-bottom: 8%;">欢迎拨打以下电话前来预订！我们将竭诚为您服务！</h6>
            <p style="font-size: 12px;">全国24小时服务热线：400-1234-XXXX</p>
            <p style="font-size: 12px;">手机号码：1234-XXXXXXX</p>
            <p style="font-size: 12px;">座机电话：123-XXXXXXX</p>
            <span style="background-color: #8eb359; color: #fff;font-size: 12px;">工作时间：周一 至 周日 9:00——18:00</span>
          </div>
          <div style="width: 60%;padding-left: 20px;">
            <form action="#" method="post">
              <label for="name">姓名</label>
              <input type="text" id="name" name="name"><br>
              <label for="phone">手机</label>
              <input type="text" id="phone" name="phone"><br>
              <label for="email">邮箱</label>
              <input type="text" id="email" name="email"><br>
              <label for="datetime">预订时间</label>
              <input type="datetime" id="datetime" name="datetime"><br>
              <label for="message">留言内容</label>
              <input type="text" style="height: 60px;" id="message" name="message"><br>
              <input type="button" style="background-color: #8eb359;color: #fff;height: 40px;font-size: 12px;"
                value="提交">
            </form>
          </div>
        </div>
      </div>
    </section>
    <section style="margin: 3% 0;">
      <div class="container" style="background-color: #f8f9f9;padding: 2%;">
        <h6 style="font-weight: 600; text-align: center;color: rgb(153, 153, 153);margin-bottom: 2%;">———— 配送须知 ————
        </h6>
        <h6 style="font-size: 15px;font-weight: 600; color: rgb(153, 153, 153);">鲜花商品配送时间和范围：</h6>
        <p>由于鲜花保存和运输的特殊性，针对不同的鲜花商品，我们的配送范围不尽相同。</p>
        <p>故事订花：**上海外环以内地区订购。</p>
        <p>瓶花：**上海外环以内地区订购。</p>
        <p>花束：全国派送，**联邦快递24小时内可送达地区。具体配送范围请见附表一。(部分花束由于花材娇嫩，**上海外环以内地区订购，请看商品详情说明。）</p>
        <p>花盒：全国派送，**联邦快递24小时内可送达地区。具体配送范围请见附表一。</p>
        <p>您可以提前2-7天预订鲜花商品，并可以选择这一区间内的期望收件日期。由于花材准备周期的原因，您不能预订比这一时间段更久的鲜花商品。
          由于生产和配送的原因，鲜花商品在上海市区周日无法送达，外地周日和周一无法送达。请您留意。</p>
        <p>上海外环以内地区送达时间为13:00-18:00。如要求在特别时段送达，将加收60元服务费（该服务**上海中环以内地区），
          请在确认订单时留意相关选项。由于路途遥远，外环以外地区视为外地，以联邦快递实际配送为准。</p>
        <p>下单成功后，我们将根据您的要求制作与发货。如无特别情况，我们不会再与您联系确认订单。订单一旦生成，如需取消或修改订单信息（地址，送达日期），
          请务必于预定收货日期的48小时之前提出。如有质量问题请在签收后24小时内联系客服。</p>
        <h6 style="font-size: 15px;font-weight: 600; color: rgb(153, 153, 153);">非鲜花商品配送时间和范围：</h6>
        <p>此类商品配送范围较广，全国一、二级城市和部分三级城市及县乡，只要顺丰快递能到的地方，我们就接受订单。具体配送范围请见附表二。</p>
        <p>非鲜花类商品不能指定收件日期，我们会在您付款后的24小时内发货(预售商品和商品详情页有特别标注发货时间的商品除外)，送达时间以物流实际配送为准。
          订购后请随时登录查询物流状态。特别提醒：法定节假日店休不发货，如遇店铺大型活动，发货时间可能会有延迟。</p>
        <h6 style="font-size: 15px;font-weight: 600; color: rgb(153, 153, 153);margin-top: 3%;">———— 配送运费 ————</h6>
        <p>普通商品订单金额（不包含限时送达费、订制费等特殊服务费）满99元免运费，不满则每单收取10元运费。</p>
        <p>海外直邮订单每单收取30元运费。​</p>
      </div>
    </section>
    <!-- 网页尾部 -->
    <footer>
      <iframe src="./footer.html" width="100%" height="400px" frameborder="0"></iframe>
    </footer>
  </div>
</body>
<script>
  new Vue({
    el: '#booking',

  })
</script>

</html>